---
import { getCollection, getEntry } from 'astro:content';
import StandardLayout from '../../layouts/StandardLayout.astro';

// Define the props type
export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

// Get the blog post data
const { entry } = Astro.props;
const { Content } = await entry.render();

// Format the publication date
const formattedDate = new Date(entry.data.pubDate).toLocaleDateString('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
---

<StandardLayout title={entry.data.title} description={entry.data.description}>
  <article class="max-w-3xl mx-auto">
    <div class="mb-8">
      <a href="/blog" class="text-blue-600 hover:text-blue-800 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
        </svg>
        Back to Blog
      </a>
    </div>

    {entry.data.image && (
      <img 
        src={entry.data.image} 
        alt={entry.data.title} 
        class="w-full h-64 md:h-96 object-cover rounded-lg shadow-md mb-8"
      />
    )}

    <h1 class="text-4xl font-bold text-gray-900 mb-4">{entry.data.title}</h1>
    
    <div class="flex items-center text-gray-600 mb-8">
      <span>By {entry.data.author}</span>
      <span class="mx-2">•</span>
      <time datetime={entry.data.pubDate.toISOString()}>{formattedDate}</time>
    </div>

    {entry.data.tags && entry.data.tags.length > 0 && (
      <div class="flex flex-wrap gap-2 mb-8">
        {entry.data.tags.map(tag => (
          <span class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full">
            {tag}
          </span>
        ))}
      </div>
    )}

    <div class="prose prose-lg max-w-none">
      <Content />
    </div>
  </article>
</StandardLayout>